<!--<!DOCTYPE html>-->
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1">

        <title>snack v3.0</title>

        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/common.css">

        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>

        <!--导入布局js，共享header和footer-->
        <script type="text/javascript" src="js/include.js"></script>

    </head>
    <body>
        <!--        1.页眉-->
        <!--引入头部-->
        <div id="header"></div>

        <!--        2.主体-->
        <div class="container">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">贪吃蛇v3</h3>
                </div>
                <div class="panel-body">
                    <div class="col-md-6 pd mg">
                      <canvas id="canv" width="400" height="400" style="background-color: gray"></canvas>
                    </div>
                    <script>
                        var box = document.getElementById("canv").getContext('2d');
                        var snack;
                        var direction;
                        var n;//下次移动相关变量
                        var food;

                        //绘制地图
                        function draw(point,color) {

                            box.fillStyle = color;
                            box.fillRect(point%20*20+1,~~(point/20)*20+1,18,18);
                        }

                        //自动运行函数
                        (function () {ready();}());

                        function ready() {
                            for (var i = 0; i < 400; i++) {
                                draw(i,"#313131")
                            }

                            snack=[66,65,64];
                            direction = 1;
                            food = 344;
                            draw(food,"yellow");
                            draw(66,"#00b7ee")
                            draw(65,"#00b7ee")
                            draw(64,"#00b7ee")
                        }

                        function run() {
                            // document.getElementById("btn").setAttribute("disable",true);
                            snack.unshift(n=snack[0]+direction);

                            if(snack.indexOf(n,1)>0||n<0||n>399||(direction==-1&&n%20==19)||direction==1&&n%20==0){
                                ready();
                                document.getElementById("btn").removeAttribute("disabled");
                                return alert("Game over!!");

                                draw(n,"#00b7ee");

                                if(n==food){
                                    while(snack.indexOf(food=~~(Math.random()*400))>=0);

                                    draw(food,"yellow");
                                }else{
                                    draw(snack.pop(),"#313131")
                                }
                                setTimeout(arguments.callee,200);
                            }

                            document.onkeydown=function (e) {
                                // if((direction==1||direction==-1)&&(snack[0]-snack[1]==1||snack[0]-snack[1]==-1)){
                                if((direction==1||direction==-1)){
                                    if(e.keyCode==38){
                                        direction=-20;
                                    }
                                    if(e.keyCode==40){
                                        direction=20;
                                    }
                                }

                                // if((direction==20||direction==-20)&&(snack[0]-snack[1]==20||snack[0]-snack[1]==-20)){
                                if((direction==20||direction==-20)){
                                    if(e.keyCode==39){
                                        direction=1;
                                    }
                                    if(e.keyCode==40){
                                        direction=-1;
                                    }
                                }
                            }
                        }

                    </script>
                    <div class="col-md-5 pd mh">
                        <div class="operations">
                            <div class="ssdiv">
                                按任意方向键开始
                            </div>
                            <div class="btn111">
                                <input type="button" id="btn" class="btn btn-danger" value="开始" onclick="run()"></input>
                                <input type="button" id="star" class="btn btn-danger" value="收藏"></input>
                                <input type="button" id="refresh" class="btn btn-primary" value="重开" onclick="location.reload()"></input>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/buttonclass.js"></script>

        <!--        3.页脚-->
        <!--导入底部-->
        <div id="footer"></div>

    </body>
</html>